<template>
  <n-card title="快捷入口">
    <n-space vertical>
      <n-alert type="success">
        快速访问常用功能
      </n-alert>
      <n-grid :cols="4" :x-gap="16" :y-gap="16">
        <n-gi v-for="item in quickItems" :key="item.id">
          <n-card 
            :title="item.title" 
            hoverable 
            class="quick-card"
            @click="$router.push(item.path)"
          >
            <template #header-extra>
              <n-icon :component="item.icon" />
            </template>
            <p>{{ item.description }}</p>
          </n-card>
        </n-gi>
      </n-grid>
    </n-space>
  </n-card>
</template>

<script setup>
import { h } from 'vue'
import { useRouter } from 'vue-router'
import { NCard, NSpace, NAlert, NGrid, NGi, NIcon } from 'naive-ui'
import { 
  HomeOutline, 
  BarChartOutline, 
  ChatbubbleOutline,
  SettingsOutline 
} from '@vicons/ionicons5'

const router = useRouter()

const quickItems = [
  { id: 1, title: '首页', description: '返回主页', path: '/', icon: HomeOutline },
  { id: 2, title: '报表', description: '查看报表', path: '/report', icon: BarChartOutline },
  { id: 3, title: '智能对话', description: '开始对话', path: '/chat', icon: ChatbubbleOutline },
  { id: 4, title: '设置', description: '系统设置', path: '/settings', icon: SettingsOutline }
]
</script>

<style scoped>
.quick-card {
  cursor: pointer;
  transition: all 0.3s;
}

.quick-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
</style>